<template>
  <el-dialog :visible.sync="dialogOpen" center width="60%" :show-close="false"
             destroy-on-close class="dialog" @close="closeDialog">
    <template slot="title">
      <div class="dialog-header">
        <span class="header-title">{{ dialogTitle }}</span>
        <i class="el-icon-circle-close close-icon" @click="dialogOpen = false"></i>
      </div>
    </template>
    <div class="field-custom">
      <div>
        <div class="field-custom-header">
          <div class="field-custom-image"></div>
          <span class="field-custom-title">搜索字段配置</span>
        </div>
        <div class="field-custom-content">
          <div class="field-selected">
            <draggable v-model="querysConfigured" group="query" dragClass="dragClass" @add="onQueryConfigAdd"
                       @update="onQueryConfigUpdate">
              <transition-group class="field-list-selected">
                <div class="field-item" v-for="item in querysConfigured" :key="item.key">{{ item.label }}</div>
              </transition-group>
            </draggable>
          </div>
          <draggable v-model="querysNotConfigured" group="query" dragClass="dragClass" @add="onQueryNotConfigAdd">
            <transition-group class="field-list">
              <div class="field-item" v-for="item in querysNotConfigured" :key="item.key">{{ item.label }}
              </div>
            </transition-group>
          </draggable>
        </div>
      </div>
      <div class="list-field-config">
        <div class="field-custom-header">
          <div class="field-custom-image"></div>
          <span class="field-custom-title">列表字段配置</span>
        </div>
        <div class="field-custom-content">
          <div class="field-selected">
            <draggable v-model="columnsConfigured" group="column" filter=".forbid" animation="0"
                       dragClass="dragClass"
                       :move="onColumnConfigMove"
                       @add="onColumnConfigAdd"
                       @update="onColumnConfigUpdate">
              <transition-group class="field-list-selected">
                <div
                  :class="[ {'special-style': item.key === 0 || item.key === 1}, item.key === 0 || item.key === 1 ? 'item forbid' : 'item']"
                  class="field-item"
                  v-for="item in columnsConfigured" :key="item.prop">{{ item.label }}
                </div>
              </transition-group>
            </draggable>
          </div>
          <draggable v-model="columnsNotConfigured" group="column" animation="0" dragClass="dragClass"
                     @add="onColumnNotConfigAdd">
            <transition-group class="field-list">
              <div class="field-item" v-for="item in columnsNotConfigured" :key="item.prop">{{ item.label }}</div>
            </transition-group>
          </draggable>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import store from "@/store";
import draggable from "vuedraggable";
import {addDynamicSettings, updateDynamicSettings} from "@/api/basicInfo/basic";
import {Message} from "element-ui";

export default {
  name: "BasicInfoFieldCustomConfig",
  props: {
    open: {
      type: Boolean,
      require: true
    },
    dynamicSettingsId: {
      type: Number,
      require: true
    },
    functionId: {
      type: String,
      require: true
    },
    functionName: {
      type: String,
      require: true
    },
    querys: {
      type: Array,
      require: true,
      default: []
    },
    columns: {
      type: Array,
      require: true,
      default: []
    }
  },
  components: {draggable},
  watch: {
    open() {
      this.dialogOpen = this.open;
    }
  },
  data() {
    return {
      dialogOpen: this.open,
      dialogTitle: "基础信息管理界面设置",
      querysConfigured: [],
      querysNotConfigured: [],
      columnsConfigured: [],
      columnsNotConfigured: []
    };
  },
  created() {
    this.querysConfigured = this.querys.filter(item => item.show === true);
    this.querysNotConfigured = this.querys.filter(item => item.show === false);
    this.columnsConfigured = this.columns.filter(item => item.show === true);
    this.columnsNotConfigured = this.columns.filter(item => item.show === false);
  },
  methods: {
    closeDialog() {
      this.dialogOpen = false;
      this.$emit('close');
      this.handleAddOrUpdateDynamicSettings();
    },
    handleAddOrUpdateDynamicSettings() {
      let querys = [...this.querysConfigured, ...this.querysNotConfigured];
      let columns = [...this.columnsConfigured, ...this.columnsNotConfigured];
      let params = {
        userId: store.getters.userId,
        functionId: this.functionId,
        functionName: this.functionName,
        conditionSettings: JSON.stringify(querys),
        columnSettings: JSON.stringify(columns)
      };
      if (this.dynamicSettingsId != null) {
        params.id = this.dynamicSettingsId;
        this.handleUpdateDynamicSettings(params);
      } else {
        this.handleAddDynamicSettings(params);
      }
    },
    handleAddDynamicSettings(params) {
      addDynamicSettings(params).then(res => {
        if (res.code === 200) {
          Message.success("设置成功！")
        }
      });
    },
    handleUpdateDynamicSettings(params) {
      updateDynamicSettings(params).then(res => {
        if (res.code === 200) {
          Message.success("设置修改成功！")
        }
      });
    },
    onQueryConfigUpdate() {
      let querys = [...this.querysConfigured, ...this.querysNotConfigured];
      this.$emit('querysConfig', querys);
    },
    onQueryConfigAdd(event) {
      if (this.querysConfigured[event.newIndex]) {
        this.querysConfigured[event.newIndex].show = true;
      }
      this.onQueryConfigUpdate();
    },
    onQueryNotConfigAdd(event) {
      if (this.querysNotConfigured[event.newIndex]) {
        this.querysNotConfigured[event.newIndex].show = false;
      }
      this.onQueryConfigUpdate();
    },
    /** 禁止拖动设置 */
    onColumnConfigMove(e) {
      return !(e.relatedContext.element.key === 0 || e.relatedContext.element.key === 1);
    },
    onColumnConfigUpdate() {
      let columns = [...this.columnsConfigured, ...this.columnsNotConfigured];
      this.$emit('columnsConfig', columns);
    },
    onColumnConfigAdd(event) {
      if (this.columnsConfigured[event.newIndex]) {
        this.columnsConfigured[event.newIndex].show = true;
      }
      this.onColumnConfigUpdate();
    },
    onColumnNotConfigAdd(event) {
      if (this.columnsNotConfigured[event.newIndex]) {
        this.columnsNotConfigured[event.newIndex].show = false;
      }
      this.onColumnConfigUpdate();
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../scss/index";
</style>
